<template>
  <div class="result-wrapper">
    <div class="song" v-for="(item, index) in musicList" :key="'Music' + index">
      <div class="name">
        <span class="iconfont icon-play" @click="playMusic(item)"></span>
        <a
          href="javascript:void(0)"
          style="color: rgb(73, 73, 73)"
          @click="toComment(item.id)"
          >{{ item.name }}</a
        >
        <span class="iconfont icon-editmedia"></span>
      </div>
      <div class="singer">{{ item.artists | formarname() }}</div>
      <div class="album">{{ item.album.name }}</div>
      <div class="time">{{ item.duration | formartime() }}</div>
    </div>
    <!-- <div class="song">
      <div class="name">
        <span class="iconfont icon-play"></span>
        美丽的神话
        <span class="iconfont icon-editmedia"></span>
      </div>
      <div class="singer">韩红|孙楠</div>
      <div class="album">《美丽的神话》</div>
      <div class="time">04:30</div>
    </div>
    <div class="song">
      <div class="name">
        <span class="iconfont icon-play"></span>
        美丽的神话
        <span class="iconfont icon-editmedia"></span>
      </div>
      <div class="singer">韩红|孙楠</div>
      <div class="album">《美丽的神话》</div>
      <div class="time">04:30</div>
    </div> -->
  </div>
</template>
<style scoped src="../assets/css/results.css"></style>

<script>
export default {
  data() {
    return {
      //搜索出来的数组
      musicList: [],
      //歌名
      MUsicName: "",
      //作者
      Name: "",
      //专辑
      zjName: "",
      //时长
      times: "",
    };
  },
  //我们一般在生命周期中的created中 提交网络请求 获取到数据 数据初始化
  //因为 在 created 期间数据已经创造好了 获取速度对比 其他钩子函数更快
  //因为created只执行一次 所以我们需要在将网络请求放进一个方法中 每次搜索自动调用created中的方法
  created() {
    //查看从输入框中传递的值
    console.log(this.$route.params.keyword);
    //调用网络请求方法 并且 将 APP 传递的输入框的值 传入到 网络请求的方法中
    this.getMusicList(this.$route.params.keyword);
  },
  /*
  因为我们第一次进行搜索是正常，但当我们第二次搜索时发现页面是不跳转的 
  因此我们可以使用watch去进行监听 但是有更好的解决方案：路由卫士
  beforeRouteUpdate 在组件被复用时调用，什么意思？就是第一次跟第二次都是在同一个组件中 只是 路径在发生改变 
  代替watch 根据to目的地 中的搜索值 确定要搜索到的值 
  */

  //to 是 我们 传入的目的地的值
  beforeRouteUpdate(to, form, next) {
    //就可以获取到第二次需要查询的 keyword值
    console.log(to.params.keyword);
    //再一次触发网络请求事件 但是这次传入的值 是我们第二次传入的值
    this.getMusicList(to.params.keyword);
    next();
  },
  methods: {
    async getMusicList(keyword) {
      // console.log(123);
      let res = await this.$axios.get("/search?keywords=" + keyword);
      console.log(res.data.result.songs);
      this.musicList = res.data.result.songs;
    },
    playMusic(item){
      // console.log(123);
      this.$router.push("/play/" + item.id);
    }
  },
  filters: {
    //过滤方法接收 newval oldval
    formarname(val) {
      //定义一个空字符串
      let names = "";
      val.map((item) => {
        names += item.name + " | ";
      });
      // console.log(names);
      return names.slice(0, names.length - 2);
    },
    //格式化时间
    formartime(val) {
      return new Date(val).toLocaleTimeString().slice(3);
    },
  },
};
</script>